<template>
  <div class="app-container receipt-detail">
    <header class="detail-container">
      <div class="top-bar">
        <div class="top-bar-tag"></div>
        <div class="top-bar-title">审批详细</div>
      </div>
      <div class="detail-table">
        <slot name="table"></slot>
      </div>
    </header>
    <section class="circulation-container">
      <div class="top-bar">
        <div class="top-bar-tag"></div>
        <div class="top-bar-title">签署流程</div>
      </div>
      <div class="main">
        <div class="table-container">
          <el-table :data="flowList" border stripe>
            <el-table-column label="签署人" align="center" prop="creator"></el-table-column>
            <el-table-column label="内容" align="center" prop="comments" width="400"></el-table-column>
            <el-table-column label="时间" align="center" prop="created"></el-table-column>
          </el-table>
        </div>
      </div>
    </section>
    <section class="comment-container" v-if="flag">
      <div class="top-bar">
        <div class="top-bar-tag"></div>
        <div class="top-bar-title">您的意见</div>
      </div>
      <div class="main">
        <div class="comment-box">
          <el-input type="textarea" :rows="5" v-model="comment"></el-input>
        </div>

        <div class="btn-box">
          <el-button type="success" :loading="saveLoading" @click="submit" :disabled="isSave" v-text="btnText"></el-button>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
  export default {
    name: "ApprovalDetail",
    props:{
      API:{
        type:Object,
        require:true
      },
      flag:{
        type:Boolean,
        require:true
      },
      id:{
        type:String,
        require:true
      }
    },
    data() {
      return {
        comment:'',
        saveLoading:false,
        flowList:[]
      }
    },
    computed:{
      isSave(){
        return this.comment.trim().length === 0
      },
      btnText(){
        return this.comment.trim().length === 0 ? '请填写您的意见' : '保存'
      },
    },
    created() {
      // this.fetchData()
      // this.getFlowList()
    },
    methods: {
      getFlowList(){
        API.getFlowList(this.jiaBan.jiaBanId).then(res=>{
          this.flowList = res.result
          console.log(this.flowList)
        })
      },
      submitChecker(){

      },
      submit(){
        if(this.saveLoading){
          return
        }
        this.saveLoading = true
        this.API.doAudit(this.jiaBan.jiaBanId,{comments:this.comment}).then(res=>{
          this.saveLoading = false
          this.$message.success('保存成功')
          this.getFlowList()
        })
      },

      fetchData(){
        this.API.getById(this.jiaBan.jiaBanId).then(res=>{
          this.jiaBan = res
        }).catch(err=>{
          console.log(err)
        })
      },
    }
  }
</script>
<style lang="scss">
</style>
<style scoped lang="scss">
  $height:35px;
  $borderColor:1px solid #e0e0e0;
  $boxShadow:0 0 3px rgba(0,0,0,0.1);

  .app-container {
    font-size: 14px;
    padding: 15px 150px;
    background-color: #F4F9FD;
    min-height: calc(100vh - 86px);
    box-sizing: border-box;

    .detail-container,
    .circulation-container,
    .comment-container {
      border: $borderColor;
      margin-bottom: 20px;
      box-shadow: $boxShadow;

      .main {
        padding: 15px;
        background: white;
      }
    }
  }

  .detail-container {
    .detail-table {
      padding: 15px;
      line-height: 30px;
      background-color: white;
    }
    .detail-content {
      background-color: white;
      padding: 15px;
      line-height: 30px;
      border-top: $borderColor;
    }
  }

  .circulation-container {
    .main {
      i {
        font-size: 15px;
        cursor: pointer;
        transition: all 0.1s linear;
        color:gray;
        &:hover {
          color: #409EFF;
        }
        &.template-add {
          margin-left: 10px;
          font-size: 20px;
        }
      }
      .table-container {
        margin: 10px 0;
      }
    }
  }
  .comment-container {
    .main {
      display: flex;
      justify-content: space-between;
      .comment-box {
        width: 70%;
        margin-right: 20px;
      }
      .btn-box {
        width: 30%;
      }
    }
  }

  table tr td:nth-of-type(odd){
    text-align: right;
    width: 10%;
    color: #606060;
    font-size: 13px;
  }
  table tr td:nth-of-type(even){
    text-align: left;
    padding-left: 10px;
    width: 15%;
    box-sizing: border-box;
    color: #555555;
  }

  .top-bar {
    height: $height;
    line-height: $height;
    padding: 0 15px;
    background-color: #FBFBFB;
    border-bottom: $borderColor;
    display: flex;
    justify-content: space-between;
    .top-bar-tag {
      width: 5px;
      height: $height;
    }
    .top-bar-title{
      font-size: 16px;
    }
    .top-bar-section {

    }
  }



</style>

